<template>
  <div>
    <van-row @click="showLoginModal">
      <van-col span="6">
        <img :src="avatarSrc" alt />
      </van-col>
      <van-col span="14">{{ nickname }}</van-col>
      <van-col span="4">
        <van-icon :name="logIcon" @click="toshowlogutModel" />
      </van-col>
    </van-row>
    <van-grid :column-num="3" square>
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>

    <!-- 登录弹出层 -->
    <van-popup v-model="isShowLoginModal">
      <!-- 登录 -->
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="danger" native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>
    </van-popup>

    <!-- 退出提示框 -->
    <van-dialog
      v-model="isShowLogoutModal"
      title="退出确认框"
      show-cancel-button
      @confirm="Logout"
    >
      <div style="text-align: center; padding: 20px 0">确定退出登录吗?</div>
    </van-dialog>
  </div>
</template>

<script>
import { ToLogin } from "../request/api";
// ES6的写法
import avatarSrc from "../assets/avatar.png";
//引入VUEX
import {mapState,mapMutations} from "vuex"
export default {
  data() {
    return {
      //头像默认值
      avatarSrc,
      //显示隐藏
      isShowLoginModal: false,
      //用户账户
      username: "",
      //用户密码
      password: "",
      //轻提示
      nickname: "点击登录",
      //图标切换
      logIcon: "arrow",
      //退出框
      isShowLogoutModal: false,
    };
  },
  created() {
    //页面刷新,登录的头像和昵称都没了;
    //所以需要页面刷新的时候,判断有没有登录,如果有登录就把信息填在页面上
    let token = localStorage.getItem("token");
    if (token) {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.nickname = userInfo.nickname;
      this.avatarSrc = userInfo.avatar;
      this.logIcon = "cross";
    }
  },
  computed:{
      ...mapState({
        isGoBack:state=>state.isGoBack.isGoBack
      })
  },

  methods: {
    ...mapMutations({
      chanIsGoBack:"/isGoBack/chanIsGoBack"
    }),

    //真正退出登录
    Logout() {
      //退出登录
      //删除本地存储
      //把用户信息修改回默认值
      //   console.log("1111");
      //1.提示用户退出登录成功
      this.$toast.success("退出登录成功");
      //2.删除本地储存中的token值
      localStorage.removeItem("userInfo");
      localStorage.removeItem("token");
      //3.把用户信息改回默认值
      this.nickname = "点击登录";
      this.avatarSrc = avatarSrc;
      this.logIcon = "arrow";
    },
    toshowlogutModel() {
      let token = localStorage.getItem("token");
      //如果没有登录到token就return
      if (!token) {
        return;
      }
      // 展示退出登录提示框
      this.isShowLogoutModal = true;
    },

    showLoginModal() {
      // 如果没有登录,才展示登录框
      let token = localStorage.getItem("token");
      //如果有就return
      if (token) {
        return;
      }
      //如果没有token就显示登录框
      this.isShowLoginModal = true;
    },
    onSubmit(values) {
      //点击登录按钮
      //   console.log("submit", values["用户名"]);
      //   console.log("submit", values["密码"]);

      //发起登录请求
      ToLogin({
        username: values["用户名"],
        pwd: values["密码"],
      }).then((res) => {
        let userInfo = res.data.userInfo;
        //登录成功之后的业务逻辑
        //1.提示用户登录成功
        //2.保存token值和用户常用信息到本地储存
        //3.关闭登录窗口
        //4.把用户基本信息渲染到页面上
        console.log(res);
        //1.提示用户登录成功
        //轻提示登录成功
        this.$toast.success("登录成功");

        //2.保存token值和用户常用信息到本地储存
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("userInfo", JSON.stringify(userInfo));

        //3.关闭登录窗口
        //500毫秒后隐藏登录框
        setTimeout(() => {
          this.isShowLoginModal = false;
          //4.把用户基本信息渲染到页面上
          this.nickname = userInfo.nickname;
          this.avatarSrc = userInfo.avatar;
          this.logIcon = "cross";

          //5.跳转回到上一个页面
          //不是所有跳转都需要跳回上一页,只有强制登录才需要返回上一页
          //要区别的是: 是不是强制过来的/user的? (而不是从哪个路由来的)
          /* if(是不是强制过来的){
            如果isGoBack为true 就要调回去
            一开始把isGoBack设置为false 强制登录的时候再改成true
          } */

          //isGoBack 定义在VueX当中. 
          if(this.isGoBack){
            this.$router.go(-1)
            //之后有需要改isGoBack为假 false
            this.chanIsGoBack(false)
          }
        }, 500);
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.van-row {
  padding: 0.2rem 4%;
  background: #333;
  color: #fff;
  .van-col {
    line-height: 0.7rem;
    font-size: 0.16rem;
    img {
      width: 0.7rem;
      border-radius: 50%;
      display: block;
    }
    &:last-child {
      text-align: right;
    }
  }
}
.van-popup {
  width: 85%;
}
</style>